/** === MENU ==== */
.menu{
	position: relative;
	z-index: 10;
	white-space: nowrap;
	padding: 0 1em;

	//the container under .menu
	.main{
		font-size: 12px;
		font-weight: normal;
		right: 0;
		top: 100%;
		margin-top: -30px;
	}
	//sub-menu indicator
	.sub:before{
		content: "\25E3";
		position: absolute;
		left: 9px;
	}
	//initially hidden menu
	ul{
		display: none;
		position: absolute;
		top: -30px;
		margin: 0 -20px 0 0;
		/* fix buffer offset */
		right: 100%;
		padding: 30px 20px 60px 40px;
		/* buffer area */
		/*	background: rgba(255,255,255,0.4);*/
	}
	//list items inside the menu
	li{
		list-style: none;
		position: relative;
		padding: 5px 20px;
		line-height: 20px;
		height: 20px;
		min-width: 4em;
		cursor: default;
		background: $menu-item-bg;
		color: $menu-text;
		&:hover{
			z-index: 2;
			background: $menu-item-bg-hover;
			//buffer area on hover
			&:after{
				content: "";
				display: block;
				position: absolute;
				left: 0;
				height: 8px;
				top:100%;
				width: 100%;
				/*	background: rgba(255,255,255,0.4)*/
			}
		}
	}

	//menu drop down indicator
	&:after{
		position: absolute;
		@include css-triangle(4px, $brand-color, top);
		right: 0;
		top: 50%;
	}

	// mouse right click context menu
	&.context{
		display: none;
		position: fixed;
		padding: 1px;
		&:after{
			content: none;
		}
	}
}

.sub:hover > ul {
	display: block;
	-webkit-animation: fadeIn 0.2s ease-in-out;
	animation: fadeIn 0.2s ease-in-out;
}

.hr{
	border-bottom: 1px solid $menu-divider;
}